
<!DOCTYPE html>
<html lang="zh-CN" class="loading">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Archive: 2015/12</title>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="google" content="notranslate" />
    <meta name="keywords" content="TriDiamond Obsidian,"> 
    <meta name="description" content="我想分享给你一些我的想法,"> 
    <meta name="author" content="niko"> 
    <link rel="alternative" href="atom.xml" title="niko" type="application/atom+xml"> 
    <link rel="icon" href="/img/logo_icon.png"> 
    <link href="https://fonts.loli.net/css?family=Roboto+Mono|Rubik&display=swap" rel="stylesheet">
    
<link rel="stylesheet" href="//at.alicdn.com/t/font_1429596_nzgqgvnmkjb.css">

    
<link rel="stylesheet" href="//cdn.bootcss.com/animate.css/3.7.2/animate.min.css">

    
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/css/share.min.css">

    
<link rel="stylesheet" href="//cdn.bootcss.com/codemirror/5.48.4/codemirror.min.css">

    
<link rel="stylesheet" href="//cdn.bootcss.com/codemirror/5.48.4/theme/dracula.css">

    
<link rel="stylesheet" href="/css/obsidian.css">

    
<link rel="stylesheet" href="/css/ball-atom.min.css">

<meta name="generator" content="Hexo 4.2.0"></head>


<body class="loading">
    <div class="loader">
        <div class="la-ball-atom la-2x">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <span id="config-title" style="display:none">niko</span>
    <div id="loader"></div>
    <div id="single" class="page">
    <div id="top">
        <a class="iconfont icon-left image-icon" href="javascript:history.back()"></a>
    </div>
    <div class="dark-obsidian section">
        <div class="article animated fadeIn">
            <div class="main">
                <div class="content animated fadeIn">
                    <div class="set">
                        <h1 style="text-align: center">一路走来</h1>
                        <p style="text-align: center">「 20 」</p>
                        <ul class="timeline timeline-centered">
                            
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">七月 2019</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">七月 14, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/07/14/%E2%80%98js%E4%B8%AD%E7%9A%84%E8%B7%A8%E5%9F%9F%E5%A4%84%E7%90%86%E2%80%99/">My awesome title</a>
                                        <p>
                                            1. 什么是跨域？

2. 跨域解决方案:① 代理方式：zhang yu pingguo ceshi asd
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">三月 2018</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">三月 13, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/13/Promise-%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%88%E5%85%A8%EF%BC%89/">Promise 学习笔记（全）</a>
                                        <p>
                                            Promise  学习笔记释义:1.用于异步计算
2.一个promise 表示一个现在，将来或用不可能使用的值 ( 可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果。)
3.可以在对象之间传递和操作promise ，帮助我们处理队列


异步回调的四个问题:
嵌套层次很深，容易陷入回调地域 ，很难维护  
无法正常使用 return  和  throw
无法正常检索堆栈信息，因为...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">三月 06, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/06/Css3%E5%AE%9E%E7%8E%B0%E8%83%8C%E6%99%AF%E6%AF%9B%E7%8E%BB%E7%92%83%E6%95%88%E6%9E%9C/">Css3实现背景毛玻璃效果</a>
                                        <p>
                                            先上代码let asdasd

                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">八月 2017</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">八月 06, 2017</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2017/08/06/javascript-%E4%BA%8B%E4%BB%B6/"> javascript 事件</a>
                                        <p>
                                            
一、事件的种类
鼠标事件click  dbclick  mouseup  mousedown mousemove mouseover mouseenter  mouseout mouseleave
滚轮事件wheel
键盘事件keydown  keypress  keyup

进度事件abort error load loadstart  loadend  progress  timeou...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">五月 2017</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">五月 23, 2017</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2017/05/23/vue-%E5%AF%BC%E8%88%AA/">vue  导航</a>
                                        <p>
                                            
学习工具


三个特点


响应式-双响数据绑定
单文件组件





脚手架安装



当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。当这些数据改变时，视图会进行重渲染。

// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 V...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">五月 07, 2017</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2017/05/07/web-phone-Debug/">移动端web页面调试方法</a>
                                        <p>
                                            移动端web调试方法
### *前言




移动端调试不同于桌面端调试，在桌面时代，chrome的调试器已经无比强大。但是在手机上调试web页面就没有这么原始的方式了。
  本文就如何调试移动端web页面，借鉴了一些博文和目前市面上好用的工具，针对移动端web页面以及APP内嵌webview页面如何调试做了一个试用和整理。
  先谈谈需求。
  最理想的方式是什么？

一.ios设备下
H...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">五月 06, 2017</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2017/05/06/JS%E6%97%A5%E6%9C%9F%E6%A0%BC%E5%BC%8F%E5%8C%96%E8%BD%AC%E6%8D%A2%E6%96%B9%E6%B3%95/">JS日期格式化转换方法</a>
                                        <p>
                                            
将日期转换为指定的格式：比如转换成 年月日时分秒 这种格式：yyyy-MM-dd hh:mm:ss 或者 yyyy-MM-dd
Date.prototype.format = function (fmt) {
  var o = {
    &#39;M+&#39;: this.getMonth() + 1, //月份
    &#39;d+&#39;: this.getDate(), /...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">三月 2017</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">三月 02, 2017</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2017/03/02/angular-gongjufangfa/">angular中的工具方法总结</a>
                                        <p>
                                            工具方法：

angular.bind(obj1,obj) —改变this指向 参数方法: obj1: 改变后this指向的对象  obj: 被改变的对象  
 function show (){
     alert(this);
 }
 show();
 angular.bind(document,show)();  //改变this指向  

angular.extend(a,b) —...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">二月 2017</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">二月 23, 2017</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2017/02/23/Atom-%E7%BC%96%E8%BE%91%E5%99%A8%E5%BF%AB%E6%8D%B7%E9%94%AE/">Atom 编辑器快捷键</a>
                                        <p>
                                            
快捷键

cmd+shift+c ：调取color Pickercmd+shift+P :    调取命令行      cmd-shift-D: 复制当前行到下一行      cmd-L 选取一行，继续按回选取下一行      cmd+,    打開包管理
Atom優秀的插件
優秀插件

                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">十二月 2016</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">十二月 06, 2016</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2016/12/06/%E5%AD%A6%E4%B9%A0%E6%80%BB%E7%BB%93/">ecma6 学习总结</a>
                                        <p>
                                            变量声明--let
---
let特性
1. 不可以重复申明
2. 没有预解析过程（即变量声明提前）
3. 块级作用域 ：一个变量或者函数只有在该区域才起作用
    ````javascript
     { //块级作用域
        let a = 1;
        console.log(a)
     }

 //举个例子：for循环依次输出 0~10
 for(var i...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">十月 2016</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">十月 21, 2016</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2016/10/21/Symbol%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B/">Symbol数据类型</a>
                                        <p>
                                            
什么是Symbol 数据类型？


MDN 的解释：
Symbol()函数会返回symbol类型的值，每个从Symbol()返回的symbol值都是唯一的， 一个symbol值能作为对象属性的标识符； 这是该数据类型仅有的目的。
个人理解：
Symbol类型是es6新增的一个数据类型,Es5的基本数据类型（undefined，null,Object,function,Number,stri...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">十月 20, 2016</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2016/10/20/%E9%97%AD%E5%8C%85%E5%AE%9E%E7%8E%B0%E5%80%92%E8%AE%A1%E6%97%B6%E7%A8%8B%E5%BA%8F/">干货--使用闭包实现js倒计时功能</a>
                                        <p>
                                            话不多说直接贴代码var dj = (function() {
            return {
                time: function() {
                    // setTimeout 内部this 指向
                    var This = this;

                    if (Thi...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">十月 17, 2016</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2016/10/17/Decorators-%E4%BF%AE%E9%A5%B0%E5%99%A8/">Decorators 修饰器</a>
                                        <p>
                                            
简介：修饰器是一个函数，用于修饰类的行为（修改 扩展类的功能，修饰器只在类的范围使用）。

 需安装：npm install babel-plugin-transform-decorators-legacy –save-dev
1.限制某个属性 是只读的{
     let readonly = function(target,name,descriptor){
         // t...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">九月 2016</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">九月 01, 2016</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2016/09/01/Es6-%E6%A8%A1%E5%9D%97%E5%8C%96/">Es6 模块化</a>
                                        <p>
                                            
基本概念

&nbsp;


语法

// A文件
// 作为一个模块   1.导出变量  2.导出函数  3.类暴露出去

//第一种写法
export let A = 123 ;
export function test(argument) {
    // body...
    console.log(&#39;test&#39;) ;
}

export class Hello{...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">八月 2016</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">八月 23, 2016</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2016/08/23/Iterator-%E5%92%8C-for-of-%E5%BE%AA%E7%8E%AF/">Iterator 和 for...of 循环</a>
                                        <p>
                                            
什么是Iterator接口

用于数组 对象  map set 等数据集合的统一读取操作，不同的数据结构，通过for…of这种形式，达到读取的目标，但是背后的iterator接口是不一样的。

MDN解释:当需要迭代一个对象的时候（比如在 for...of 循环的开始时），它的 @@iterator 方法就会被调用一次（0 个参数），同时返回的迭代器将被用来获取被迭代出来的值。

for ...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">八月 23, 2016</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2016/08/23/Generator-%E7%94%9F%E6%88%90%E5%99%A8/">Generator 生成器</a>
                                        <p>
                                            
什么是 Generator？

解决异步编程 ：&nbsp;&nbsp;&nbsp;&nbsp; Generator 包含多个步骤，每个步骤包含yield 或者 return  ，遇到就会停止，进行下一步，调用next()函数 。

基本用法：

{
    // Generator 基本用法
    let tell=function* (){
    yield &#39;a&#39;...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">八月 18, 2016</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2016/08/18/Object.assign/">Object.assign</a>
                                        <p>
                                            Es5中实现
    //对象assign 方法
var createAssigner = function(keysFunc,defaults){
  return function(obj){
    var length = arguments.lenth;
    if(defaults) obj = Object(obj);
    if(length&lt;2||obj==nul...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">八月 09, 2016</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2016/08/09/Promise-%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/">Promise 异步编程的解决方案</a>
                                        <p>
                                            promise概念：异步编程解决方案
举例：函数A执行步骤——》执行完执行 B
 解决上述问题有两种方式：

回调方式



事件触发的方式




使用Promise

{
    // ES5  回调解决异步   模拟ajax  
  // 基本定义
  let ajax=function(callback){
    console.log(&#39;执行&#39;);
    set...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">一月 2016</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">一月 22, 2016</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2016/01/22/webIcon/">网页ICON 优化</a>
                                        <p>
                                            
Css Sprite



*Icon Font *








icomoon.io字体引入

font-face
  font-family: &#39;music-icon&#39;
  src: url(&#39;../fonts/music-icon.eot?2qevqt&#39;)
  src: url(&#39;../fonts/music-icon.eot?2qevqt...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">十二月 2015</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">十二月 06, 2015</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2015/12/06/%E5%88%A4%E6%96%AD%E4%B8%A4%E4%B8%AA%E6%95%B0%E7%BB%84%E6%98%AF%E5%90%A6%E7%9B%B8%E7%AD%89-%E5%88%A4%E6%96%AD%E4%B8%A4%E4%B8%AA%E5%AF%B9%E8%B1%A1%E6%98%AF%E5%90%A6%E7%9B%B8%E7%AD%89/">判断两个数组是否相等    &amp;&amp;   判断两个对象是否相等  </a>
                                        <p>
                                            
数组比较
方法 1：

JSON.stringify(a1) == JSON.stringify(a2)
//或者
a1.toString() == a2.toString()




不建议使用此方法这种方法在某些情况下是可行的，当两个数组的元素顺序相同且元素都可以转换成字符串的情况下确实可行，但是这样的代码存有隐患，比如数字被转换成字符串，数字“1”和字符串“1”会被认为相等，可能造成...
                                        </p>
                                    </div>
                                </li>
                            
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <div id="back-to-top" class="animated fadeIn faster">
        <div class="flow"></div>
        <span class="percentage animated fadeIn faster">0%</span>
        <span class="iconfont icon-top02 animated fadeIn faster"></span>
    </div>
</body>
<footer>
    <p class="copyright" id="copyright">
        &copy; 2020
        <span class="gradient-text">
            niko
        </span>.
        Powered by <a href="http://hexo.io/" title="Hexo" target="_blank" rel="noopener">Hexo</a>
        Theme
        <span class="gradient-text">
            <a href="https://github.com/TriDiamond/hexo-theme-obsidian" title="Obsidian" target="_blank" rel="noopener">Obsidian</a>
        </span>
        <small><a href="https://github.com/TriDiamond/hexo-theme-obsidian/blob/master/CHANGELOG.md" title="v1.4.3" target="_blank" rel="noopener">v1.4.3</a></small>
    </p>
</footer>

<script type="text/javascript" src="https://cdn.bootcss.com/mathjax/2.7.6/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<script>
  MathJax.Hub.Config({
    "HTML-CSS": {
      preferredFont: "TeX",
      availableFonts: ["STIX", "TeX"],
      linebreaks: {
        automatic: true
      },
      EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50)
    },
    tex2jax: {
      inlineMath: [
        ["$", "$"],
        ["\\(", "\\)"]
      ],
      processEscapes: true,
      ignoreClass: "tex2jax_ignore|dno",
      skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
    },
    TeX: {
      noUndefined: {
        attributes: {
          mathcolor: "red",
          mathbackground: "#FFEEEE",
          mathsize: "90%"
        }
      },
      Macros: {
        href: "{}"
      }
    },
    messageStyle: "none"
  });
</script>
<script>
  function initialMathJax() {
    MathJax.Hub.Queue(function () {
      var all = MathJax.Hub.getAllJax(),
        i;
      // console.log(all);
      for (i = 0; i < all.length; i += 1) {
        console.log(all[i].SourceElement().parentNode)
        all[i].SourceElement().parentNode.className += ' has-jax';
      }
    });
  }

  function reprocessMathJax() {
    if (typeof MathJax !== 'undefined') {
      MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
    }
  }
</script>



    
<link rel="stylesheet" href="//cdn.bootcss.com/gitalk/1.5.0/gitalk.min.css">

    
<script src="//cdn.bootcss.com/gitalk/1.5.0/gitalk.min.js"></script>



<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="/js/plugin.js"></script>
<script src="/js/obsidian.js"></script>
<script src="/js/jquery.truncate.js"></script>
<script src="/js/search.js"></script>


<script src="//cdn.bootcss.com/typed.js/2.0.10/typed.min.js"></script>


<script src="//cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>


<script src="//cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/js/social-share.min.js"></script>


<script src="https://cdn.bootcss.com/codemirror/5.48.4/codemirror.min.js"></script>

    
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/javascript/javascript.min.js"></script>


    
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/css/css.min.js"></script>


    
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/xml/xml.min.js"></script>


    
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/htmlmixed/htmlmixed.min.js"></script>


    
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/clike/clike.min.js"></script>


    
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/php/php.min.js"></script>


    
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/shell/shell.min.js"></script>


    
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/python/python.min.js"></script>




    
<script src="/js/busuanzi.min.js"></script>

    <script>
        $(document).ready(function () {
            if ($('span[id^="busuanzi_"]').length) {
                initialBusuanzi();
            }
        });
    </script>



<link rel="stylesheet" href="//cdn.bootcss.com/photoswipe/4.1.3/photoswipe.min.css">
<link rel="stylesheet" href="//cdn.bootcss.com/photoswipe/4.1.3/default-skin/default-skin.min.css">


<script src="//cdn.bootcss.com/photoswipe/4.1.3/photoswipe.min.js"></script>
<script src="//cdn.bootcss.com/photoswipe/4.1.3/photoswipe-ui-default.min.js"></script>


<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>
    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">
        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <!--  Controls are self-explanatory. Order can be changed. -->
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>



    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="//www.googletagmanager.com/gtag/js?id=UA-149874671-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-149874671-1');
    </script>





<script>
    function initialTyped () {
        var typedTextEl = $('.typed-text');
        if (typedTextEl && typedTextEl.length > 0) {
            var typed = new Typed('.typed-text', {
                strings: ["Think like an artist, develop like an artisan", "艺术家思维去思考问题，工匠创造精神去开发"],
                typeSpeed: 90,
                loop: true,
                loopCount: Infinity,
                backSpeed: 20,
            });
        }
    }

    if ($('.article-header') && $('.article-header').length) {
        $(document).ready(function () {
            initialTyped();
        });
    }
</script>


    
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>

    <script>

        var valine = new Valine();

        function initValine(path) {
            if (!path) path = window.location.pathname;
            let language = 'zh-CN';
            if (!language) {
                language = 'en';
            } else {
                language = language.toLowerCase();
            }
            valine.init({
                el: '#vcomments',
                appId: 'h0Nbcp32WtIpnnHaGTLWbtKo-gzGzoHsz',
                appKey: 'hPhFiAi2vIj2OStCIi79waty',
                notify: 'false',
                verify: 'false',
                avatar: 'happ_niko',
                placeholder: '快写下你的想法与我互动',
                visitor: 'true',
                path: path,
                lang: language
            });
        }

        $(document).ready(function () {
            initValine();
        });
    </script>



</html>
